<template>
  <div :class="bgcolor">
    <div v-show="false" class="bg-sky-50 hover:bg-bg-sky-100"></div>
    <div class="p-[4px] mt-4">
      <span class="inline-block w-[20px] font-bold"> {{ index + 1 }}、 </span>
      <a-checkbox :value="item.id" />
      <span v-if="item.ctype" class="font-bold ml-[3px]">
        【
        <DictLabel dictType="quesLib_ques_type" :dictValue="item.ctype" />】
      </span>
      <a :href="`#/quesLib/form?quesId=${item.id}`" class="font-bold text-[1.23rem]">
        {{ item.ctitle }}
      </a>
      <DictLabel
        v-if="item.firstLevel && item.firstLevel !== '999'"
        dictType="quesLib_priority_level"
        :dictValue="item.firstLevel"
      />
      <span class="float-right">
        <DictLabel dictType="quesLib_milestone" :dictValue="item.milestone" />
      </span>
    </div>
    <div class="">
      <a-row>
        <a-col
          class="p-3"
          :xs="{ span: 12, order: 1 }"
          :sm="{ span: 4, order: 1 }"
          :md="{ span: 8 }"
          :lg="{ span: 3 }"
          :xl="{ span: 2, offset: 1 }"
          :xxl="{ span: 2 }"
          ><span>
            <DictLabel dictType="quesLib_ques_step" :dictValue="item.step" />
          </span>
        </a-col>
        <a-col
          class="p-3"
          :xs="{ span: 12, order: 3 }"
          :sm="{ span: 10, order: 2 }"
          :md="{ span: 8 }"
          :lg="{ span: 4 }"
          :xl="{ span: 3, offset: 1 }"
          :xxl="{ span: 3, offset: 1 }"
        >
          <div style="margin: 0 10px" class="flex flex-row w-[100%]">
            <img alt="创建人" :src="creatorSvg" class="w-[20px]" />
            <div class="w-[100%]">
              {{ item.creator?.userName }}
            </div>
          </div>
        </a-col>
        <a-col
          class="p-3"
          :xs="{ span: 24, order: 5 }"
          :sm="{ span: 12, order: 4 }"
          :md="{ span: 12 }"
          :lg="{ span: 8 }"
          :xl="{ span: 6, offset: 1 }"
          :xxl="{ span: 6, offset: 1 }"
        >
          <div v-if="item.dateRange[0]" class="flex flex-row w-[100%]">
            <img :src="timeSvg" class="w-[20px]" />：
            <span>{{ item.beginDate }}</span>
            <span class="time-">-</span>
            <span>{{ item.endDate }}</span>
          </div></a-col
        >
        <a-col
          class="p-3"
          :xs="{ span: 12, order: 4 }"
          :sm="{ span: 10, order: 3 }"
          :md="{ span: 8 }"
          :lg="{ span: 4 }"
          :xl="{ span: 5, offset: 1 }"
          :xxl="{ span: 5 }"
        >
          <div class="flex flex-row w-[100%]">
            <img alt="负责人" :src="managerSvg" class="w-[20px]" />：
            <span>{{ item.managerUser?.userName }}</span>
          </div>
        </a-col>
        <a-col
          class="p-3"
          :xs="{ span: 12, order: 2 }"
          :sm="{ span: 8, order: 5 }"
          :md="{ span: 3 }"
          :lg="{ span: 3 }"
          :xl="{ span: 3 }"
          :xxl="{ span: 3 }"
        >
          <div style="margin-left: 60px" class="w-[100%]">
            {{ getAgoAt(item.createDate) }}
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, PropType, computed } from 'vue';

  import { QueslibInfo } from '/@/api/quesLib/info/queslibInfo';
  import { DictLabel } from '/@/components/Dict';
  import creatorSvg from '/@/assets/svg/queslib/creator.svg';
  import managerSvg from '/@/assets/svg/queslib/manager.svg';
  import timeSvg from '/@/assets/svg/queslib/time.svg';
  import { getAgoAt } from '/@/utils/dateUtil';

  const props = defineProps({
    item: {
      type: Object as PropType<QueslibInfo>,
      default: () => ({}),
    },
    index: {
      type: Number,
      default: 0,
      required: true,
    },
    checkedList: {
      type: Array as PropType<String[]>,
      default: [] as PropType<String[]>,
    },
  });
  const checked = computed(() => props.checkedList.includes(props.item.id));
  const bgcolor = computed(() => {
    if (checked.value) {
      return ['bg-sky-50', 'hover:bg-sky-100'];
    }
    if (props.index % 2 === 1) {
      return [`bg-light-300`, 'hover:bg-light-500}'];
    }
    return ['hover:bg-light-500}'];
  });
</script>

<style lang="less" scoped>
  .time- {
    margin: 0 5px;
    font-weight: bolder;
    font-size: 16px;
    line-height: 16px;
    color: #1951be;
  }
</style>
